<template>
  <div class="caitainer">
  <titleHead :Crumbs="Crumbs"></titleHead>
  <div class="box">
    <div class="title"> 策略管理</div>
    <div class="search">
      <div class="ipt">
        <input type="text" placeholder="请在此输入搜索内容" v-model="search">
      </div>
      <div class="query">
        <el-button  @click="confirm_search">搜索</el-button>
      </div>
      <div class="slt">
        <el-button  @click="a">新建策略</el-button>
      </div>
    </div>
    <div class="tb">
      <div></div>
      <el-table
        :data="strategy_table"
        style="width: 100%;"
        class="Centered"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="index" width="118px" label="序号"></el-table-column>
        <el-table-column prop="name" label="策略名称" ></el-table-column>
        <el-table-column label="策略状态" prop="state" >
        </el-table-column>
        <el-table-column prop="memo" label="描述"  show-overflow-tooltip></el-table-column>
        <el-table-column label="已关联的组">
          <template slot-scope="scope" show-overflow-tooltip>
            <span v-for="(item,index) in scope.row.devGroups" :key="index">{{item.name}}&nbsp;&nbsp;&nbsp;</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  show-overflow-tooltip>
          <template slot-scope="scope" >
            <span @click="details(scope.row)">详情 </span>
            <span @click="del(scope.row)">删除 </span>
            <span @click="update_strategy(scope.row)">修改策略 </span>
            <span @click="Relation(scope.row.devGroups,scope.row)">修改关联 </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="Relation_groups" v-show="Relation_Show">
        <div class='set-box'>
        <div class="title"> 修改关联  <span> <i class=""  @click="G_popup"> X</i></span> </div>
      <div class="center">
        <div class="Relation">
          <div class="title">
            <span>已关联的分组</span>
          </div>
          <div class="Relation_box">
            <div class="tips">
              <span>名称</span>
              <span>描述</span>
              <span>删除</span>
            </div>
            <ul>
              <li v-for="(item,index) in Relevance" :key="index">
                <span>{{item.name}}</span>
                <span :title="item.memo">{{item.memo?item.memo.slice(0,7):item.memo="无"}}</span>
                <span @click.stop="del_Relation(item,index)">移除</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="Relation">
          <div class="title">
            <span>未关联的分组</span>
          </div>
          <div class="Relation_box">
            <div class="tips">
              <span>名称</span>
              <span>描述</span>
              <span>关联</span>
            </div>
            <ul>
              <li v-for="(item,index) in Unrelated" :key="index">
                <span>{{item.name}}</span>
                <span :title="item.memo">{{item.memo?item.memo.slice(0,7):item.memo="无"}}</span>
                <span @click.stop="AssociationStrategy(item,index)">增加</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
        <div class="btn">
          <el-button @click="ModifyingAssociation">修改</el-button>
        </div>
				</div>
        </div>
      </div>
      <!-- 策略的详情查看 -->
      <div class="Mask" v-show="details_show">
        <div class="details_view">
          <i @click="Close" class="el-icon-close" ></i>
          <div class="Mask_title">策略详情</div>
          <!-- 策略详情 -->
          <el-table
            :data="details_list.items"
            class="Centered"
            @selection-change="handleSelectionChange"
            border
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="策略执行方式">
              <template slot-scope="scope">
                <span>   {{scope.row.dateSpan.type | mode}}  </span>
              </template>
            </el-table-column>
            <el-table-column   label="周循环" show-overflow-tooltip>
              <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.dateSpan.weekDays " :key="index">
               周{{scope.row.dateSpan.weekDays[index]==0?"天":scope.row.dateSpan.weekDays[index]}}
              </span>
              </template>
            </el-table-column>
            <el-table-column prop="dateSpan.startDate" label="开始日期"></el-table-column>
            <el-table-column prop="dateSpan.endDate" label="结束日期"></el-table-column>
                   <el-table-column label="开始时间">
              <template slot-scope="scope">
                <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme |time}}</div>
              </template>
            </el-table-column>
           <el-table-column prop="onTime.bias" label="开启偏移时间">
              <template slot-scope="scope">
                  <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.bias}}</div>
              </template>
            </el-table-column>
           <el-table-column prop="onTime.brightness" label="亮度">
            <template slot-scope="scope">
                  <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.brightness}}</div>
              </template>
            </el-table-column>
            <el-table-column label="结束时间">
              <template slot-scope="scope">
                <div v-if="scope.row.offTime">
                  <div
                  v-for="(itme,index) in scope.row.offTime.timePts"
                  :key="index"
                >{{itme|time}}</div>
                </div>
              </template>
            </el-table-column>
              <el-table-column label="关闭偏移时间">
              <template slot-scope="scope">
                <div v-if="scope.row.offTime">
                  <div
                  v-for="(itme,index) in scope.row.offTime.timePts"
                  :key="index"
                >{{itme.bias}}</div>
                </div>
              </template>
            </el-table-column>
          <el-table-column prop="onTime.cct" label="色温">
                <template slot-scope="scope">
                  <div  v-if="scope.row.offTime">
                  <div  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.cct}}</div>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>
      <!-- 修改策略时间 -->
      <div class="uptate_Popup" v-if="popup">
        <i class="el-icon-close" @click="g"></i>
        <div>
          <input type="text" placeholder="名称" v-model="coantainer.name">
          <input type="text" placeholder="描述" v-model="coantainer.memo">
        </div>
        <textarea class="txt" v-model="coantainer.appointment"></textarea>
        <el-button @click="check">校验</el-button>
        <div class="json">
        <div class="WriteIn2">
          <div class="WriteInSubbox">
          <json-viewer :value="jsonData" boxed copyable :expand-depth="1"></json-viewer>
          </div>
        </div>
        </div>
        <div>
          <el-button @click="put">修改</el-button>
        </div>
      </div>
      <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :page-size="size"
            :total="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
    </div>
  </div>
  </div>
</template>
<script>
import Vue from "vue";
import JsonViewer from "vue-json-viewer";
import titleHead from "@/views/title";
Vue.use(JsonViewer);
var cityOptions = [];
var cityOptions_loop = [];
export default {
  props:['imcType','paths'],
  data() {
    return {
      Choice:false,
      list: true,
      list1: false,
      checked: true,
      strategy_table: [],
      multipleSelection: [],
     Crumbs:{
       router: [],
         path:["夜景照明系统","策略列表"]
      },
      details_list: [],
      details_show: false, //策略详情弹窗
      coantainer: {},
      popup: false,
      jsonData: {},
      CurrentItem: {}, //点击当前修改的那一项
      Relevance: [], //已经关联回路的分组
      Unrelated: [], //未关联的策略的分组
      Relation_Show: false, //修改策略弹窗
      id: null,
      total:0,
      size:10,
      search:""
    };
  },
  components:{
    titleHead
  },
  filters: {
  capitalize: function (value) {
    return value.sort()
  },
   mode(e){
          if(e=="everyday"){
                return "每天模式"
          }else if(e=="daytoday"){
            return "指定时间"
          }else if (e=="weekloop"){
            return "指定星期"
          }
      },
      time(e){
        if(e.type=="absolute"){
            return  e.time
        }else if(e.type=="sunrise"){
            return "日出"
        }else {
          return "日落"
        }
      }
},
  methods: {
    // 修改关联的分组
    ModifyingAssociation() {
      this.CurrentItem.devGroups = this.Relevance;
      this.$http
        .put("/api/threesuns/appointment/update", this.CurrentItem)
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.CurrentItem.Relevance = [];
            this.Relevance = [];
            this.getStrategy();
            this.G_popup();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    // 关闭管关联策略弹窗
    G_popup() {
      this.Relation_Show = false;
      this.getStrategy();
      //  this.UnrelatedGrouping()
      this.Relevance = [];
      // this.Unrelated=[]
    },
    // 从当策略里面拿到 已经关联的分组进行赋值
    Relation(e, l) {
      // this.DuplicateRemoval();
      this.Relation_Show = true;
      this.Relevance = e;
      this.CurrentItem = l;
      this.id = l.id;
      this.UnrelatedGrouping();
      console.log(e)
    },
    //从未关联到已关联
    AssociationStrategy(val, index) {
      console.log(val,index)
      this.Unrelated.splice(index, 1);
      this.Relevance.push(val);
    },
    // 从已关联到未关联
    del_Relation(val, index) {
      this.Unrelated.push(val);
      this.Relevance.splice(index, 1);
    },
    // 所有分组
    UnrelatedGrouping() {
      this.$http.get(`/api/threesuns/appointment/get?id=${this.id}&imcType=${this.imcType}`)
        .then(res => {
          // this.Unrelated
          if (res.data.code == "200") {
            this.Unrelated = res.data.data.groups;
          }
        })
        .catch(err => {
          // this.$message.success(err.data.message)
        });
    },
    // 对修改的josn字符串进行格式化
    details(e) {
      this.details_show = true;
      this.details_list = JSON.parse(e.appointment);


    },
    // 表格多选
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    gettable() {
      // this.$http.get("rem").then(res => {
      //   this.tableData3 = res.data;
      // });
    },
    routerJump(){
      var path= this.$route.path
        switch(path){
          case '/SoundStrategy':
             this.$router.push("/setSoundStrategy")
          break;
          case '/ElectricBoxStrategy':
             this.$router.push("/setStrategy")
          break;
          case '/lampStrategy':
             this.$router.push("/setStrategy")
          break;
       }
    },
    a(index) {
      sessionStorage.setItem("index",index)
      this.routerJump()
       
    },
    BoxAddStrategy(){
        this.$router.push("/setStrategy")
    },
    confirm_search(){
      this.page=1
      this.getStrategy()
    },
    handleCurrentChange(e){
      this.page=e
      this.getStrategy()
    },
    // 所有策略
    getStrategy() {
      this.$http.get("/api/threesuns/appointment/list/get",{
        params:{
          name:this.search,
          page:this.page-1,
          size:this.size,
          imcType:this.imcType
        }
      }).then(res => {
        // console.log()
        if(res.data.data){
          var resultArray = res.data.data.sort(
            function compareFunction(param1, param2) {
                return param1.name.localeCompare(param2.name, "zh");
            }
           );
        this.strategy_table =resultArray.filter(item=>{
            // if(item.imcType==this.imcType){
              return item
            // }
        })
        this.total=res.data.total
        }
 
      });
    },
    // 详情窗口关闭
    Close() {
      this.details_show = false;
      this.xf_group = false;
      this.xf_loop=false
      this.Choice=false
    },
    del(e) {
      this.$confirm('此操作将永久删除该策略, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              this.$http
        .delete("/api/threesuns/appointment/delete", {
          params: {
            ids: e.id
          }
        })
        .then(res => {
          if(res.data.code=="200"){
            this.$message.success(res.data.message);
            this.getStrategy()
          }else{
            this.$message.success(res.data.message);
            this.getStrategy()
          }
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

    },
    // notice(){
    // },
    // json修改
    SetJson(){
      this.popup = true;
      this.Choice=false
    },
    // 修改
    update_strategy(e) {
      this.$http
        .get("/api/threesuns/appointment/get", {
          params: {
            id: e.id,
            imcType:this.imcType
          }
        })
        .then(res => {
          
      this.Choice=true
         sessionStorage.setItem("strategy", JSON.stringify(res.data.data))
           this.routerJump()
          if (res.data.code == "200") {
            this.coantainer = res.data.data;
            let json = res.data.data.appointment;
            this.jsonData = JSON.parse(json);
          }
        });
    },
    // 校验json
    check() {
      let json = this.coantainer.appointment;
      this.jsonData = JSON.parse(json);
    },
    g() {
      this.popup = false;
    },
    put() {
      this.$http
        .put("/api/threesuns/appointment/update", this.coantainer)
        .then(res => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.getStrategy();
            this.popup = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
    }
  },
  mounted() {
    // this.gettable();
    this.getStrategy();
    // this.UnrelatedGrouping()
  }
};
</script>

<style scoped>
@import url("../../../assets/css/table.css");
* {
  box-sizing: border-box;
}
.caitainer {
  position: relative;
  overflow: hidden;
  height: 100%;

  min-width: 1500px;
}
.search {
    overflow: hidden;
    height: 62px;
    /* border: 1px solid #fff; */
    border: 1px solid #0dc2c3;
    border-bottom: none;
    box-shadow: 0px 1px 6px 0px #0dc2c3 inset;
}
.tab {
  overflow: hidden;
  height: 100%;
  float: left;
  padding: 20px 60px;
}

.tab li {
  float: left;
  width: 90px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.list {
  background-color: #3883db;
  color: #fff;
}
.list1 {
  background-color: #3883db;
  color: #fff;
}
.tab :hover {
  cursor: pointer;
}
.ipt {
  float: left;
  width: 498px;
  height: 30px;
  background: none;
  margin-top: 20px;
  position: relative;
  margin-left: 70px;
}

.ipt i {
  position: absolute;
  top:10px;
  left: 12px;
  color: #ccc;
}
.ipt input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 42px;
  background: none;
  border:1px solid #fff;
  color: #fff;
}
.query {
  float: left;
  margin-top: 16px;
  margin-left: 24px;
}
/* .el-button--primary {
} */
.el-button:focus{

}
.query .el-button {
  padding: 10px 15px;
  background-color: #1d938d;
  border-radius:5px;
  color: #fff;
}
.slt {
  float: left;
  width: 118px;
  height: 100%;
  margin-top: 16px;
  margin-left: 34px;
  position: relative;
}
/deep/ .slt .el-button {
  padding: 10px 15px;
  border-radius: 0;
  background-color: #1d938d;
  color: #ffffff;
  border-radius:4px;
}
.del {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
/deep/ .del .el-button {
  padding: 8px 20px;
  border-radius: 0;
  background-color: #1d938d;
}

.del span {
  display: block;
  width: 100%;
  height: 100%;
}
.del :hover {
  cursor: pointer;
  color: #fff;
}
.tb {
  margin: 0 auto;
  width: 1416px;
  height:667px;
}
.block {
  text-align: center;
}

.cell {
  text-align: center;
}

.details_view {
  width: 1340px;
  color: #1d938d;
  margin: 100px auto;
}
.details_view > div {
  background-color: #0a7e7e;
  padding: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.details_view i {
  float: right;
  color: #fff;
  margin-right: 30px;
  font-size: 20px;
  margin-top: 10px;
  font-style: normal;
}
.details_view :hover {
  cursor: pointer;
}
.details_view ul {
  height: 400px;
  padding-top: 10px;

  overflow-y: scroll;
}
.details_view li {
  padding: 10px;
  background-color: #ccc;
  margin-bottom: 10px;
  margin-left: 20px;
}
.details_view span {
  margin-right: 15px;
}
.Mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0px;
  left: 0;
  z-index: 5;
}

.tb:hover {
  cursor: pointer;
}
.uptate_Popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  padding-top: 300px;
  left: 0;
  padding-left: 100px;
  overflow-y: scroll;
}
.uptate_Popup input {
  height: 30px;
  width: 200px;
}
.txt {
  width: 500px;
  height: 400px;
  display: inline-block;
  resize: none;
}
.json {
  display: inline-block;
  width: 500px;
  overflow-y: scroll;
}
.jsonData {
  height: 400px;
  overflow-y: scroll;
}
.el-icon-close {
  font-size: 30px;
  float: right;
  color: #fff;
  margin-top: -200px;
  margin-right: 50px;
}
.Relation_groups {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding-top: 100px;
}
.Relation_groups > b {
  font-size: 25px;
  color: #fff;
}
.Relation {
  width: 450px;
  height: 500px;
  background-color: #fff;
  float: left;
  margin-top: 90px;
  margin-left: 92px;
  background-color: #042321;
}
.Relation ul li span:nth-child(2){
  width: 150px;
}
.title {
  height:39px;
  line-height: 39px;
  background-color: #0a7e7e;
  color: #fff;
text-align: center;
font-size: 18px;
font-weight: 700;
}


.Relation_box {
  height: 450px;
  /* overflow-y: scroll; */
}
.Relation_box ul{
 height: 410px;
  overflow-y: scroll;
}
.Relation_box ul::-webkit-scrollbar {
  width: 2px;
}
.Relation_box ul::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #011615;
}
.Relation_box ul::-webkit-scrollbar-thumb {
  background: #ccc;
}
.Relation_box span {
  display: inline-block;
  width: 145px;
  line-height: 35px;
  text-align: center;
  color: #fff;
}
.tips {
  font-weight: 700;
  font-size: 18px;
  border: 1px solid #fff;
   background:#187970;
   display: flex;
}
.tips :nth-child(2){
  width: 150px;
}
.Relation_box span {
  border-right: 1px solid #fff;
}
.Relation_box  span:last-child {
  border:none;
}
.Relation_box li {
  border: 1px solid #fff;
  border-top: none;
  display: flex;
}
.btn {
  text-align: center;
}
.el-icon-close {
  color: #fff;
  font-size: 25px;
}
.el-button {
  padding: 10px 15px;
  background-color: #0a7e7e;
  color: #fff;
}
.names {
  height: 30px;
  line-height: 30px;
  color: #ffffff;
}
.names span {
  display: inline-block;
  width: 129px;
  text-align: center;
}
.btn_Lower_hair {
  width: 100px;
  margin: auto;
}
.Mask1 {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  z-index: 3;
  left: 0;
}
.a {
  width: 830px;
}
.title i {
  float: right;
  margin-right: 20px;
}
.WriteIn2 {
  position: absolute;
  height: 600px;
  left: 730px;
  top: 100px;
}
.WriteInSubbox {
  width: 500px;
}
.Choice {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 5;
  text-align: center;
}
.Choice .el-button {
  margin-top: 400px;
  padding: 12px 15px;
  margin-right: 20px;
}
.box {
  width: 1416px;
  margin: 0 auto;
  background: #011615;
  box-shadow: 0px 1px 14px 0px #0dc2c3 inset;
}
.box >.title {
  text-align: center;
  font-size: 22px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-weight: 700;
  margin-top:55px;
}
.Mask_title{
  text-align:center;
  font-size: 18px;
}
.set-box {
  height: 704px;
  width: 1180px;
  background-color:#011615;
  position: absolute;
  left: 0;
  right: 0;
  top: 130px;
  bottom: 0;
  margin: 0 auto;
}
.center {
  overflow: hidden;
  margin: 0 auto;
}
.set-box span .el-icon-circle-close{
  position: absolute;
  right: 10px;
  top:10px;
  color: #ffff;
}
.title i{
  font-weight: 400;
  font-size: 20px;
}
/deep/ .el-pagination  .btn-next,/deep/.el-pagination .btn-prev  {
  background-color: rgba(0, 0, 0, 0.0);
}
/deep/ .el-pagination button:disabled, /deep/ .el-pager li{

  background-color: rgba(0, 0, 0, 0.0);
}
</style>
